<template>
	<view class="main" v-if="num">
		<view class="tab">
			<view :class="type=='today'?'active':''" @click='handtype("today")'>今日收入<text></text></view>
			<view :class="type=='month'?'active':''" @click='handtype("month")'>本月收入<text></text></view>
			<view :class="type=='all'?'active':''" @click='handtype("all")'>总收入<text></text></view>
		</view>
		<view class="box">
			<view class="num">
				单量<text>{{num.num}}单</text>
			</view>
			<view class="fg"></view>
			<view class="num">
				收入<text>{{num.money}}元</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:'today',
				num:''
			};
		},
		onLoad() {
			this.handdata()
		},
		methods:{
			handtype(type){
				this.type=type
				this.handdata()
			},
			handdata(){
				global.$http.request({
					url: '/api/rider_user/order_count',
					data: {
						token: uni.getStorageSync('token'),
						type: this.type,
					}
				}).then(res => {
					if (res.data.code == 0) {
						this.num=res.data.data
					}
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #F8F6F9;
	.main{
		
		.tab {
			width: 750rpx;
			height: 70rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			padding: 0 100rpx;
		
			view {
				font-size: 30rpx;
				color: #000;
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding-top: 15rpx;
		
				text {
					display: block;
					width: 90rpx;
					height: 5rpx;
					margin-top: 15rpx;
				}
			}
		
			.active {
				color: #1DBE61;
		
				text {
					background-color: #1DBE61;
				}
			}
		}
		.box{
			width: 710rpx;
			height: 180rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(116, 116, 116, 0.3);
			border-radius: 20rpx;
			margin: 40rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.num {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 28rpx;
				color:#808080;
			
				text {
					font-size: 30rpx;
					color:#000000;
				}
			}
			
		
			.fg {
				width: 2rpx;
				height: 80rpx;
				background-color: #B3B3B3;
			}
		}
		
	}
}
</style>
